<template>
  <div ref="containerRef" class="h-full">
    <n-data-table :data="tableData"
                  :remote="true"
                  :columns="columns"
                  :loading="loading"
                  :pagination="pagination"
                  pagination-behavior-on-filter="first"
                  :style="`height:${height}px`"
                  :max-height="height-90"
                  :row-key="(row:any) => row[rowKey]">
    </n-data-table>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {useElementSize} from '@vueuse/core'

const containerRef = ref()
const {height} = useElementSize(containerRef)
const props = defineProps({
  getData: {
    type: Function,
    required: true
  },
  orParams: {
    type: Object,
    default() {
      return {}
    },
  },
  andParams: {
    type: Object,
    default() {
      return {}
    }
  },
  orderParams: {
    type: Object,
    default() {
      return {}
    }
  },
  columns: {
    type: Array,
    required: true,
  },
  rowKey: {
    type: String,
    default: 'id',
  },
})
const loading = ref(false)
const tableData = ref()
const pagination = reactive(
    {
      pageNo: 1,
      pageSize: 8,
      showSizePicker: true,
      pageSizes: [5, 8, 15, 20, 99, 999],
      itemCount: 0,
      onChange: (page: number) => {
        pagination.pageNo = page
        handleQuery()
      },
      onUpdatePageSize: (pageSize: number) => {
        pagination.pageNo = 1
        pagination.pageSize = pageSize
        handleQuery()
      }
    })


/**
 * 查询
 */
const handleQuery = () => {
  window.$loadingBar.start()
  loading.value = true
  props.getData({
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
    orParams: JSON.stringify(props.orParams),
    andParams: JSON.stringify(props.andParams),
    orderParams: JSON.stringify(props.orderParams)
  }).then((res: { data: { code: number; data: { records: any; total: number; }; }; }) => {
    if (res && res.data.code === 0) {
      tableData.value = res.data.data.records
      pagination.itemCount = res.data.data.total
    }
  }).finally(() => {
    loading.value = false
    window.$loadingBar.finish()
  })

}
/**
 * 搜索
 */
const doQuery = () => {
  pagination.pageNo = 1
  handleQuery();

}
defineExpose({
  doQuery
})
</script>

<style scoped>


</style>